<template>
	<view class="">
		<u-navbar title="上新专利" @leftClick="leftClick" :autoback="true"></u-navbar>
		<u-search
			placeholder="专利号/专利名称/申请人/主分类号" 
			v-model="condition.searchName" 
			inputAlign="center"
			:showAction="true" actionText="搜索" :animation="false"
			shape="round"
			borderColor="#bbb"
			@custom="custom"
		></u-search>
		<view class="flex-row space-x-40 section_4">
		  <view class="flex-row justify-between group_5">
		    <view class="flex-row">
		      <text class="font_3">{{titles[condition.patentType] || '全部类型'}}</text>
		      <i class="iconfont icon-jiantou-xia icon-xie" @click="handleBtn('show')"></i>
			  <u-picker :show="show" :columns="columns" keyName="label" @confirm="confirm" @cancel="cancel"></u-picker>
		    </view>
		    <view class="flex-row">
		      <text class="font_3">申请日</text>
		      <view class="icon-1">
		      	<u-icon name="arrow-up-fill" class="icon_arrow" :color="applyDate == 'up'? '#5372fc' : '#999'" size="6" @click="arrow('up','applyDate')"></u-icon>
				<u-icon name="arrow-down-fill" size="6" :color="applyDate == 'down'? '#5372fc' : '#999'" @click="arrow('down','applyDate')"></u-icon>
		      </view>
		    </view>
		    <view class="flex-row">
		      <text class="font_3">授权日</text>
		      <view class="icon-1">
		      	<u-icon name="arrow-up-fill" class="icon_arrow" :color="authorizationDate == 'up'? '#5372fc' : '#999'" size="6" @click="arrow('up','authorizationDate')"></u-icon>
		      	<u-icon name="arrow-down-fill" size="6" :color="authorizationDate == 'down'? '#5372fc' : '#999'"  @click="arrow('down','authorizationDate')"></u-icon>
		      </view>
		    </view>
		    <view class="flex-row">
		      <text class="font_3">价格</text>
		      <view class="icon-1">
		      	<u-icon name="arrow-up-fill" class="icon_arrow" :color="unitPrice == 'up'? '#5372fc' : '#999'" size="6" @click="arrow('up','unitPrice')"></u-icon>
		      	<u-icon name="arrow-down-fill" size="6" :color="unitPrice == 'down'? '#5372fc' : '#999'" @click="arrow('down','unitPrice')"></u-icon>
		      </view>
		    </view>
		  </view>
		</view>
		
		<view style="border-bottom: 16rpx solid #f6f4f8;" v-for="(item,index) in news" :key="index">
			<newDetails :info="item"></newDetails>
		</view>
		<!--  -->
		<view class="flex-row justify-center more" v-if="news.length >= 6">
		  <!-- <image
		    class="image_14"
		    src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/632afc43e391320011695f3b/16648545819446724490.png"
		  /> -->
		  <!-- <text class="font_15 text_24">向上滑动</text> -->
		  <text class="font_15 text_25" @click="getNewPatentFun('more')">加载更多</text>
		</view>
		<u-empty v-if="!news.length" class="empty-data">
		</u-empty>
	</view>
</template>

<script>
	import {getNewPatent} from '@/api/index.js'
	import newDetails from '../../components/newDetails.vue';
	export default {
		components:{newDetails},
		data() {
			return {
				newIndex:1,
				unitPrice:'',
				applyDate:'',
				authorizationDate:'',
				columns:[[
					{label:'全部类型',key:''},
					{label:'发明专利',key:'0'},
					{label:'实用新型',key:'1'},
					{label:'外观设计',key:'2'}
				]],
				titles:{
					'0':'发明专利',
					'1':'实用新型',
					'2':'外观设计'
				},
				show:false,
				news:[],
				condition:{
					patentType:'',
					searchName:'',
					pageNo:1
				},
			};
		},
		onLoad(option) {
			this.getNewPatentFun()
		},
		methods:{
			getNewPatentFun(type){
				if(type) {
					this.newIndex += 1;
				}
				let pageSize = 10 * this.newIndex;
				this.condition.pageSize = pageSize;
				getNewPatent(this.condition).then(res => {
					if(res.code === 200) {
						this.news = res.data.list;
					}
				})
			},
			leftClick(){
				if (getCurrentPages().length > 1) {
					uni.navigateBack();
				} else {
					uni.switchTab({
						url: '../../pages/index/index'
					})
				}
			},
			
			submit(){
				
			},
			arrow(value,type) {
				let arr = ['authorizationDate','applyDate','unitPrice'];
				arr.forEach(item => {
					if(item != type) {
						this[item] = ''
					}
				})
				if(this[type] == value) {
					this[type] = '';
					this.condition.orderBy = '';
				}else this[type] = value;
				
				this.condition.orderBy = type;
				this.condition.orderSort = this[type] ? this[type] == 'down' ? 'desc' : 'asc' : null;
				this.getNewPatentFun();
			},
			handleBtn(type) {
				this[type] = !this[type];
			},
			confirm({value}){
				this.condition.patentType = value[0].key;
				this.show = false;
				this.getNewPatentFun();
			},
			cancel() {
				this.show = false;
			},
			custom(){
				this.getNewPatentFun();
			}
		}
	}
</script>

<style lang="scss" scoped>
.light {
	color: #5372fc;
}
.icon-xie {
	margin-top: -6rpx;
}
.icon_arrow {
	margin-bottom: 2rpx;
}
.space-x-40 {
  & > view:not(:first-child),
  & > text:not(:first-child),
  & > image:not(:first-child) {
    margin-left: 40rpx;
  }
  .group_5 {
    flex: 1 1 auto;
    align-self: center;
    .image_13 {
      margin: 9rpx 0 10rpx 4rpx;
      flex-shrink: 0;
      width: 17rpx;
      height: 9rpx;
    }
    .image_9 {
      flex-shrink: 0;
      width: 11rpx;
      height: 17rpx;
    }
    .image_10 {
      margin: 6rpx 0 5rpx;
    }
    .image_11 {
      margin: 7rpx 0 4rpx;
    }
    .image_12 {
      margin: 6rpx 0 5rpx 4rpx;
    }
	.icon-1 {
		margin-top: 2rpx;
	}
  }
  .group_4 {
    margin-right: 11rpx;
	margin-top: -10rpx;
    .text_6 {
      margin-left: 12rpx;
	  margin-right: 8rpx;
      align-self: center;
    }
    .image_8 {
      flex-shrink: 0;
      align-self: center;
      width: 24rpx;
      height: 25rpx;
    }
  }
  .font_3 {
    font-size: 28rpx;
    font-family: Microsoft YaHei;
    line-height: 28rpx;
    color: #666666;
  }
}
.section_4 {
  margin-top: 24rpx;
  padding: 0 25rpx;
  margin-bottom: 24rpx;
  border-bottom: 16rpx solid #f6f4f8;
  background-color: #ffffff;
}
.image_14 {
  width: 20rpx;
  height: 20rpx;
}
.more {
	width: 100%;
	height: 88rpx;
	line-height: 80rpx;
	background: #fff;
	align-items: center;
	font-size: 32rpx;
}
.font_15 {
  font-size: 32rpx;
  font-family: Microsoft YaHei;
  line-height: 18rpx;
  color: #666666;
}
.text_24 {
  margin-left: 12rpx;
}
.text_25 {
  margin-left: 2rpx;
}
</style>